<template>
 <div>
  <button @click="msg ='你坏'">改msg</button>
    <p>{{ msg }}</p>
     <button v-if="show" @click="fn">搜索</button>
     <input ref="inp" v-else type="text">
 </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      msg: '你好'
    }
  },
  // 数据发生改变，并且dom已经渲染
  // 虽然这里能实现需求，但是不建议用这个钩子，因为有性能问题
  // 因为不管任何数据发生改变，它会都调用
  // updated () {
  //   // console.log(this.$refs.inp) 
  //   this.$refs.inp.focus()
  // },
  methods: {
    async fn () {
      // 1. 显示出输入框 -- dom渲染是异步的，一定要等当前同步代码执行完了才会渲染
      // 这句话仅仅只是把数据改成了false，但是dom还没渲染
      this.show = false
      // 2. 让输入框获得焦点
      // console.log(this.$refs.inp) // undefined

      // 不建议用setTimeout，所以建议用vue专门提供的一个异步代码
      // setTimeout(() => {
      //   this.$refs.inp.focus()
      // }, 400);

      // this.$nextTick(() => {
      //   // 这个异步代码一定会在下一次dom更新后执行
      //   this.$refs.inp.focus()
      // })

      // 用法2：promise用法
      await this.$nextTick()
      // await后面的代码一定是下次dom更新后调用的
      this.$refs.inp.focus()
    }
  }
}
</script>

<style>

</style>